<template>
  <transition appear appear-active-class="fadeInY">
    <div class="blogItem" @click="goBlogDetail">
      <div class="blogItem-header">
        <span :style="{ color: chooseColor(blog.way) }">{{ blog.way }} </span> |
        {{ time(blog.time) }}
      </div>
      <div class="blogItem-content">
        <div class="blogItem-content-title">{{ blog.title }}</div>
        <div class="blogItem-content-abstract">{{ blog.abstract }}</div>
      </div>
      <div class="blogItem-footer">
        <span class="see">
          <i class="iconfont iconyanjing" style="color: #5183e6"></i>
          <span style="color: #5183e6">{{ blog.seeNum }}</span>
        </span>
        <span class="see">
          <i class="iconfont icondianzan" style="color: #5183e6"></i>
          <span style="color: #5183e6">{{ blog.goodNum }}</span>
        </span>
        <span class="see">
          <i class="iconfont iconshoucang" style="color: #5183e6"></i>
          <span style="color: #5183e6">{{ blog.collectNum }}</span>
        </span>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { Tblog } from "@/type/blog";
import { formatTime } from "@/formatTime";
import { defineProps, computed, toRefs } from "vue";
import { useRouter } from "vue-router";
type TBlogItem = {
  blog: Tblog;
};
const router = useRouter();
const props = defineProps<TBlogItem>();
const { blog } = toRefs(props);
const time = computed(() => {
  return (time: string) => {
    return formatTime(time);
  };
});
const chooseColor = (way: string) => {
  const wayMenu: any = {
    全部: "rgba(202, 151, 254)",
    vue: "rgba(65, 184, 131)",
    react: "rgba(130, 215, 247)",
    node: "rgba(2, 110, 0)",
    js: "rgba(253, 211, 3)",
    css: "rgba(1, 112, 230)",
    其他: "rgba(171, 97, 115)",
    随笔: "rgba(106, 106, 106)",
  };
  return wayMenu[way] || "rgba(171, 97, 115)";
};
const goBlogDetail = () => {
  router.push("/detail-h5/" + blog.value.id);
};
</script>

<style scoped lang="scss">
@import url("../../css/comment/animate.css");
.blogItem {
  background-color: rgba($color: #fff, $alpha: 0.85);
  box-shadow: 0px 2px 4px 0px #00000066;
  margin: 14px 0;
  color: #888;
  padding: 8px 16px;
  &-header {
    font-size: 12px;
  }
  &-content {
    margin: 6px 0;
    &-title {
      font-size: 16px;
      color: #000;
      font-weight: bold;
    }
    &-abstract {
      margin-top: 4px;
      font-size: 12px;
    }
  }
  &-footer {
    font-size: 12px;
    margin-top: 6px;
    .see {
      padding-right: 10px;
      i {
        font-size: 12px;
        margin-right: 4px;
      }
    }
  }
}
</style>
